<template>
    <div class="index">
        <div class="title">
            <el-date-picker
                @change='changeDate'
                v-model="date"
                type="datetimerange"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right">
            </el-date-picker>

        </div>
        <div class="top">
            <div class="item">
                <p>加盟商营业额汇总</p>
                <p>{{sumMerchant}}</p>
            </div>
            <div class="item">
                <p>加盟商今日营业额</p>
                <p>{{nowMerchant}}</p>
            </div>
            <div class="item">
                <p>普通营业额汇总</p>
                <p>{{sumNumber}}</p>
            </div>
            <div class="item">
                <p>普通今日营业额</p>
                <p>{{nowNumber}}</p>
            </div>
        </div>
        <div class="btm">
            <div class="left">
                <h1>加盟商营业额</h1>
                <ve-line :data="merchant" :settings="chartSettings"></ve-line>
            </div>
            <div class="right">
                <h1>普通用户营业额</h1>
                <ve-line :data="number" :settings="chartSettings"></ve-line>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        this.chartSettings = {
            area: true
        }
        return{
            date:null,
            merchant: {//加盟商
                columns: ['日期', '营业额'],
                rows: []
            },
            number:{//普通用户
                columns: ['日期', '营业额'],
                rows: []
            },
            sumMerchant:0,//加盟商营业额汇总
            sumNumber:0,//普通用户营业额汇总
            nowMerchant:0,//当天加盟商营业额
            nowNumber:0,//当天普通人营业额
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
        }
    },
    mounted(){
        this.getSummary()
        this.getDay()
    },
    methods:{
        //日期改变
        changeDate(e){
            console.log(e)
            this.getSummary()
            
        },
        //当天营业额
        async getDay(){
            let start_at = null
            let end_at = null
            if (this.date) {
                start_at = this.date[0]
                end_at = this.date[1]
            }
            let { data: { data, code }} = await this.$axios({
                url: '/v1/goods/day',
                method: 'GET',
                params: {
                    start_at:start_at,
                    end_at:end_at
                }
            })
            if (code === 0) {
                this.nowMerchant = data.merchant
                this.nowNumber = data.number
            }
        },
        //营业额统计
        async getSummary(){
            this.sumMerchant = 0
            this.sumNumber = 0
            let start_at = null
            let end_at = null
            if (this.date) {
                start_at = this.date[0]
                end_at = this.date[1]
            }
            let { data: { data, code }} = await this.$axios({
                url: '/v1/goods/summary',
                method: 'GET',
                params: {
                    start_at:start_at,
                    end_at:end_at
                }
            })
            if (code === 0) {
                
                this.merchant.rows = data.merchant.map(item=>{
                    this.sumMerchant +=Number(item.price)
                    
                    return {'日期':item.date,'营业额':item.price}
                })
                this.number.rows = data.number.map(item=>{
                    this.sumNumber +=Number(item.price)
                    return {'日期':item.date,'营业额':item.price}
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .index{
        .title{
            text-align:right;
            padding: 10px;
        }
        .top{
            display: flex;
            flex-wrap: wrap;
            .item{
                padding: 40px;
                width: 300px;
                margin-right: 10px;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
                text-align: center;
            }
            margin-bottom: 50px;
        }
        .btm{
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            .left,.right{
                width: 48%;
                h1{
                    text-align: center;
                }
            }
        }
    }
</style>